@import "./common";

body {
    header {
        nav {
            padding: getvw(48) getvw(22) getvw(18);
        }
    }

    main {

        .portraitBox {
            position: relative;

            .imageBox {
                img {
                    display: block;
                    width: getvw(170);
                    height: getvw(170);
                }
            }

            span {
                color: #000;
                position: absolute;

                &:nth-of-type(1) {
                    font-size: getvw(30);
                    top: getvw(34);
                    left: getvw(220);
                }

                &:nth-of-type(2) {
                    color: #9d9d9d;
                    font-size: getvw(26);
                    top: getvw(100);
                    left: getvw(220);
                }

                &:nth-of-type(3) {
                    font-size: getvw(88);
                    top: getvw(34);
                    right: getvw(22);
                }
            }
        }

        .mysBox {
            margin-top: getvw(26);
            display: flex;
            justify-content: space-between;

            .circle {
                width: getvw(195);
                height: getvw(151);
                background-color: #b2e0a0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                i {
                    color: #fff;
                    font-size: getvw(80);
                }

                span {
                    margin-top: getvw(10);
                    font-size: getvw(26);
                }

                &:nth-child(2) {
                    background-color: #a0dce0;
                }

                &:nth-child(3) {
                    background-color: #e0b7a0;
                }
            }
        }

        .wallet {
            margin-top: getvw(20);
            position: relative;

            >i {
                font-size: getvw(70);
            }

            span {
                font-size: getvw(26);
                line-height: getvw(80);
                position: absolute;

                &:first-of-type {
                    left: getvw(90);
                }

                &:last-of-type {
                    font-size: getvw(24);
                    right: 0;

                    .icon-xiangyou3 {
                        font-size: getvw(26);
                        color: #ff9344;
                        margin-left: getvw(8);
                    }
                }
            }

            .icon-qiandai {
                color: #f7af16;
            }

            .icon-chazhaoyonghu {
                color: #b2e0a0;
            }

            .icon-zuji {
                color: #a0dce0;
            }

            .icon-idea-full,
            .icon-banshou_Line,
            .icon-dianhua {
                color: #ff9344
            }
        }

        .btnBox {
            margin-top: getvw(36);
            display: flex;
            justify-content: space-around;

            button {
                width: getvw(147);
                height: getvw(76);
                font-size: getvw(24);
                border: none;
                background-color: #ff9344;
                border-radius: getvw(38);
                color: #fff;
            }
        }
    }
}